<template>
    <div class="tags">
        <el-scrollbar ref="scrollMenu">
            <div class="scrollbar-flex-content">
                <el-tag v-for="(tag, index) in this.$store.state.activeRoute.Tags" :key="tag.title" closable type="info"
                    size="mini" @close="handelClose(tag, index)" @click="tabClick(tag, index)"
                    :class="{ active: $store.state.activeRoute.tagIndex == index }">
                    {{ tag.title }}
                </el-tag>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // tags: [
            //   { name: '标签一'},
            //   { name: '标签二'},
            //   { name: '标签三'},
            //   { name: '标签四'},
            //   { name: '标签五'}
            // ]
        };
    },
    methods: {
        // 删除标签页 回调函数
        handelClose(tag, index) {
            if (index < 0) return false; //首页不能删除
            this.$store.commit('removeTagsRoute', tag);//移出当前标签页
            if (index == this.$store.state.activeRoute.tagIndex) {//如果关闭激活的标签页
                this.$store.commit("setTagIndex", index - 1);//激活上一个标签页
                this.$router.replace({ path: this.$store.state.activeRoute.Tags[index - 1].path });
            } else if (index < this.$store.state.activeRoute.tagIndex) {//关闭激活标签页前面任意一个
                this.$store.commit('setTagIndex', this.$store.state.activeRoute.tagIndex - 1)
            }
        },
        // 点击标签页 切换路由 点亮标签页
        tabClick(tag, index) {
            console.log('标签页', tag, index);
            this.$store.commit('setTagIndex', index);
            this.$router.replace({ path: tag.path })
        },
        // 滑轮滚动事件 回调函数
        handelWheel(event) {
            // 获取滚动方向
            const detail = event.wheelDelta || event.detail;
            // 定义滚轮方向 
            const moveForwardStep = 1;
            const moveBackStep = -1;
            // 定义滚动距离
            let step = 0;
            if (detail < 0) {
                step = moveForwardStep * 100
            } else {
                step = moveBackStep * 100
            }
            this.$refs.scrollMenu.wrap.scrollLeft += step;
        }
    },
    mounted() {
        console.log(this.$refs.scrollMenu)
        this.$refs.scrollMenu.wrap.addEventListener('mousewheel', this.handelWheel)
    }
}
</script>
<style lang="scss" scoped>
.scrollbar-flex-content {
    display: flex;
}

.tags {
    // margin: 5px 0;
    text-align: left;
    cursor: pointer;

    .el-tag {
        // margin-left: 10px;
        border-radius: 0 !important;
    }

    .el-tag:first-child {
        margin-left: 0;
    }

    .el-tag.active {
        background-color: #fff;
        color: #000;
    }
}

::v-deep .el-tag:first-child i {
    display: none;
}

// ::v-deep .el-scrollbar__wrap {
//     margin-bottom: -8px !important;
// }
</style>